<template>
  <el-card class="box-card el-card-flex">
    <div slot="header" class="clearfix">
      <span>
        <i class="el-icon-medal"></i>
        角色授权功能
      </span>
    </div>
    <div class="text item el-over-auto">
      <el-form :model="roleForm" ref="roleForm">
        <el-form-item v-for="(list, index) in funcList" :key="list.id">
          <el-checkbox :label="list.id" v-model="list.checked" :checked="list.checked" @change="funCheckChange(list)">{{ list.name }}</el-checkbox>
          <ul class="checkbox-ul">
            <li class="checkbox-li" v-for="(list2, index2) in list.children" :key="list2.id">
              <div class="checkbox-head">
                <el-checkbox :label="list2.id" v-model="list2.checked" :checked="list2.checked" @change="funCheckChange(list2,list)">{{ list2.name }}</el-checkbox>
              </div>
              <div v-for="(list3, index3) in list2.children" :key="list3.id">
                <label class="checkbox-label">
                  <input type="checkbox" class="checkbox-check" v-model="list3.checked" :checked="list3.checked"
                    @change="funCheckChange(list3)" />
                  <span>{{ list3.name }}</span>
                </label>
              </div>
            </li>
          </ul>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: right;padding: 10px;">
      <el-button type="primary" @click="funcSaveEvt">
        确定
        <i class="el-icon-document-checked el-icon--right"></i>
      </el-button>
      <el-button @click="cancelEvt">
        取消
        <i class="el-icon-refresh-left"></i>
      </el-button>
    </div>
  </el-card>
</template>
<script>
  import {
    MessageBox,
    Message
  } from 'element-ui';
  export default {
    data() {
      return {
        roleForm: {},
        funcList: [],
        funcCheckedIds: [] //选中的功能节点id合集
      };
    },
    methods: {
      cancelEvt() {
        this.$router.go(-1) // 后退
      },
      /* 获取功能列表*/
      getFunc(roleId) {
        this.axios.get(`/roleFunAuth/nodeTree`, {
          params: {
            roleId: roleId
          }
        }).then(res => {
          if (res.data.code != 10000) return;
          this.funcList = res.data.data;
        })
      },
      /* 保存功能授权*/
      funcSaveEvt() {
        this.funcCheckedIds = [];
        this.getFuncByChecked(this.funcList);
        let sendDatas = {
          roleIds: [this.$route.params.roleId],
          funIds: this.funcCheckedIds
        };
        this.axios.put('/roleFunAuth', sendDatas).then(res => {
          if (res.data.code != 10000) return;
          Message.success('授权功能成功！');
          setTimeout(() => {
            this.cancelEvt();
          }, 2000)
        })
      },
      /* 根据parentId设置父元素选中模式*/
      setfuncByPId(parentId, funcList, checked) {
        if (parentId && funcList && funcList.length > 0) {
          for (let i = 0, len = funcList.length; i < len; i++) {
            if (funcList[i].id == parentId) {
              if (checked) funcList[i].checked = checked;
              this.setfuncByPId(funcList[i].parentId, this.funcList, checked);
            } else {
              this.setfuncByPId(parentId, funcList[i].children, checked);
            }
          }
        };
      },
      /* checkbox选中事件*/
      funCheckChange(list) {
        this.setfuncByPId(list.parentId, this.funcList, list.checked); //设置父元素选中模式
        let children = list.children;
        if (children) {
          for (let i = 0, len = children.length; i < len; i++) {
            children[i].checked = list.checked;
            this.funCheckChange(children[i], list);
          }
        }
      },
      /* 获取所有选中的功能主键*/
      getFuncByChecked(funcList) {
        if (funcList && funcList.length > 0) {
          for (let i = 0, len = funcList.length; i < len; i++) {
            if (funcList[i].checked) {
              this.funcCheckedIds.push(funcList[i].id)
            };
            this.getFuncByChecked(funcList[i].children);
          }
        };
      }
    },
    created() {
      this.getFunc(this.$route.params.roleId); //获取功能列表
    }
  };
</script>
<style lang="scss">
  .checkbox-head {
    text-align: right;
    padding-right: 5px;
  }

  .checkbox-li {
    float: left;
    width: 180px;
    height: 88px;
    padding: 0 0 5px 5px;
    margin: 0 10px 10px 0;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .checkbox-label {
    float: left;
    margin: 0 5px 5px 0;
    position: relative;
  }

  .checkbox-label>span {
    float: left;
    height: 20px;
    line-height: 20px;
    border: 1px solid #dcdfe6;
    border-radius: 20px;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 10px;
    background: rgb(245, 245, 245);
    cursor: pointer;
  }

  .checkbox-label:hover span {
    background: rgb(235, 235, 235);
  }

  .checkbox-check {
    position: absolute;
    visibility: hidden;
    opacity: 0;
  }

  .checkbox-label:focus span,
  .checkbox-label .checkbox-check:checked+span {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }
</style>
